<template>
  <el-row id="login-div">
    <el-col :xs="{span: 24}" :sm="{span:10, offset:7}">
      <div>
        <el-card class="box-card" style="width: 100%">
          <div class="grid-content bg-purple">
            <div class="register-text">用户登录
              <!--              <el-tooltip class="item" effect="dark" content="暂未开发第三方人员登录、注册功能，还请谅解！" placement="right-start">-->
              <!--                <i class="el-icon-info"></i>-->
              <!--              </el-tooltip>-->
            </div>
            <el-input id="account" label="账号" placeholder="请输入账号或邮箱" v-model="account" clearable></el-input>
            <el-input id="password" placeholder="请输入密码" v-model="password" show-password></el-input>
            <div>
              <el-row>
                <el-col :span="5">
                  <el-checkbox v-model="rememberMe" style="margin-top: 10px">记住我</el-checkbox>
                </el-col>
                <el-col :span="5">
                  <router-link class="el-link" style="color: gray;margin-top: 10px;" :to="{path: '/reset-pwd'}">忘记密码
                  </router-link>
                </el-col>
                <el-col :span="14">
                  <router-link class="el-link" style="color: gray;margin-top: 10px;" :to="{path: '/regist'}">还没有账号？前往注册
                  </router-link>
                </el-col>
              </el-row>
            </div>

            <div style="margin-top: 20px">
              <el-button type="primary" class="login-button" :loading="loginLoading" v-on:click="login"
                         style="margin-left: 15px">登录
              </el-button>
              <el-button type="warning" class="login-button" v-on:click="cancel">取消</el-button>
            </div>

          </div>
        </el-card>
      </div>
    </el-col>
  </el-row>

</template>

<script>
const axios = require("axios");
import qs from 'qs'

export default {
  data() {
    return {
      account: '',
      password: '',
      loginLoading: false,
      rememberMe: false
    }
  },
  methods: {
    cancel() {
      this.$router.push("/")
    },
    toRegister: function () {
      this.$router.push("/regist");
    }, login: function () {
      this.loginLoading = true;
      axios.post("/api/user/login", qs.stringify({
        account: this.account,
        password: this.password,
        rememberMe: this.rememberMe
      })).then((res) => {
        if (res.data.code === 200) {
          let path = this.$route.query.route;
          console.info("path=", path);
          let route = this.$route.query.route
          let activeIndex = this.$route.query.activeIndex
          this.$router.push({
            path: route ? route : "/",
            query: {
              activeIndex: activeIndex ? activeIndex : 1
            }
          });
        } else if (res.data.code === 403) {
          this.$message.warning("用户名或密码错误");
        } else {
          this.$message.warning(res.datea.msg);
        }
        this.loginLoading = false;
      }).catch((err) => {
        console.error(err);
        this.loginLoading = false;
      })
    }
  }
}
</script>

<style>
#login-div {
  margin-top: 150px;
}

.register-text {
  font-size: 1.25rem;
  text-align: center;
  margin-top: 1.25rem;
  margin-bottom: 20px;
}

.box-card {
  margin: auto;
}

.text {
  font-size: 14px;
}

.login-button {
  float: right;
  margin-bottom: 15px;
}

#password {
  margin-top: 15px;
  margin-bottom: 15px;
}

.register-item {
  padding: 18px 0;
}

.box-card {
  width: 480px;
}
</style>
